<template>
  <a-layout-sider :style="{ overflow: 'auto', height: '100vh', left: 0, top: 0, bottom: 0 }"
    v-model:collapsed="main.collapsed" :trigger="null" collapsible>
    <div class="logo" />
    <a-menu v-model:selectedKeys="main.$state.selectedKeys" v-model:openKeys="main.$state.openKeys" theme="dark"
      mode="inline">
      <a-menu-item key="1">
        <HomeOutlined />
        <span @click="ToggleRouter('/index')">首 页</span>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #title>
          <span>
            <UserOutlined />
            <span>个人中心</span>
          </span>
        </template>
        <a-menu-item key="2" @click="ToggleRouter('/Auser')">普通用户</a-menu-item>
        <a-menu-item key="3" @click="ToggleRouter('/Buser')">维修工</a-menu-item>
        <a-menu-item key="4" @click="ToggleRouter('/Admin')">管理员</a-menu-item>
      </a-sub-menu>
      <a-menu-item key="5">
        <CalendarOutlined />
        <span @click="ToggleRouter('/AnnouncementManagement')">公告管理</span>
      </a-menu-item>
      <a-sub-menu key="sub2">
        <template #title>
          <span>
            <TeamOutlined />
            <span>用户信息</span>
          </span>
        </template>
        <a-menu-item key="6" @click="ToggleRouter('/AuserData')">普通用户信息</a-menu-item>
        <a-menu-item key="7" @click="ToggleRouter('/BuserData')">维修工信息</a-menu-item>
        <a-menu-item key="8" @click="ToggleRouter('/AdminData')">管理员信息</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub3">
        <template #title>
          <span>
            <ImportOutlined />
            <span>提交申请</span>
          </span>
        </template>
        <a-menu-item key="9" @click="ToggleRouter('/RepairApplication')">报修申请</a-menu-item>
        <a-menu-item key="10" @click="ToggleRouter('/PurchaseRequisition')">采购申请</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub4">
        <template #title>
          <span>
            <ToolOutlined />
            <span>维修信息</span>
          </span>
        </template>
        <a-menu-item key="11" @click="ToggleRouter('/RepairRecords')">维修记录</a-menu-item>
        <a-menu-item key="12" @click="ToggleRouter('/AuditTrails')">审核记录</a-menu-item>
        <a-menu-item key="13" @click="ToggleRouter('/ProgressUpdates')">进度更新</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub5">
        <template #title>
          <span>
            <DesktopOutlined />
            <span>设备管理</span>
          </span>
        </template>
        <a-menu-item key="14" @click="ToggleRouter('/DeviceInformation')">设备信息</a-menu-item>
        <a-menu-item key="15" @click="ToggleRouter('/DeviceRecording')">设备记录</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub6">
        <template #title>
          <span>
            <ShopOutlined />
            <span>物品管理</span>
          </span>
        </template>
        <a-menu-item key="17" @click="ToggleRouter('/PublicGoods')">公共物品</a-menu-item>
        <a-menu-item key="18" @click="ToggleRouter('/PurchaseRecords')">采购记录</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub7">
        <template #title>
          <span>
            <BarChartOutlined />
            <span>数据分析</span>
          </span>
        </template>
        <a-menu-item key="19" @click="ToggleRouter('/RepairStatus')">维修状态</a-menu-item>
        <a-menu-item key="20" @click="ToggleRouter('/RepairStatistics')">报修统计</a-menu-item>
        <a-menu-item key="21" @click="ToggleRouter('/ProcurementStatistics')">采购统计</a-menu-item>
        <a-menu-item key="22" @click="ToggleRouter('/FeedbackStatistics')">反馈统计</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>
<script setup>
import { BarChartOutlined,ShopOutlined,DesktopOutlined,ToolOutlined,ImportOutlined,UserOutlined, HomeOutlined, CalendarOutlined,TeamOutlined } from '@ant-design/icons-vue'
// import {ref} from 'vue'
import { useMainStore } from '@/store'
import { useRouter } from 'vue-router'
const r1 = useRouter()
const ToggleRouter = (path) => r1.push(path)
const main = useMainStore()
</script>
<style scoped>
  .ant-layout-sider::-webkit-scrollbar {
    display: none;
}
</style>